<template>
  <el-row class="details fff">
    <el-row>
      <el-form
        ref="addForm"
        :inline="true"
        :rules="rules"
        :model="addForm"
        label-position="top"
        class="search"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="库区" prop="location">
              <el-cascader
                v-model="addForm.location"
                :options="options"
                :props="cateProps"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="库位编号">
              <el-input v-model="addForm.code" disabled placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="库位名称" prop="name">
              <el-input
                v-model="addForm.name"
                placeholder="请输入"
                :clearable="true"
                max="10"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="温度类型" prop="temperatureType">
              <el-select
                v-model="addForm.temperatureType"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="(item, index) in temperatureType"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="承重类型" prop="bearingType">
              <el-select
                v-model="addForm.bearingType"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="(item, index) in bearingType"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="用途类型" prop="useType">
              <el-select
                v-model="addForm.useType"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="(item, index) in useType"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="仓库状态" prop="status">
              <el-radio-group v-model="addForm.status">
                <el-radio :label="1">启用</el-radio>
                <el-radio :label="0">停用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="承载体积" prop="maxWeight" class="formInfoTip">
              <el-input
                v-model="addForm.maxWeight"
                type="number"
                placeholder="请输入"
                :clearable="true"
                max="10"
              >
                <template slot="append">m³</template></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="承载上限" prop="maxNum" class="formInfoTip">
              <el-input
                v-model="addForm.maxNum"
                type="number"
                placeholder="请输入"
                :clearable="true"
                max="10"
              >
                <template slot="append">个</template></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="承载重量" prop="maxVolume" class="formInfoTip">
              <el-input
                v-model="addForm.maxVolume"
                type="number"
                placeholder="请输入"
                :clearable="true"
                max="10"
              >
                <template slot="append">Kg</template></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="库位排/列/层" class="mini">
              <el-row>
                <div class="mini-item">
                  <el-input
                    v-model="addForm.locationRow"
                    type="number"
                    placeholder="请输入"
                    :clearable="true"
                    max="10"
                  />
                </div>
                <div class="mini-item">
                  <el-input
                    v-model="addForm.locationColumn"
                    type="number"
                    placeholder="请输入"
                    :clearable="true"
                    max="10"
                  />
                </div>
                <div class="mini-item">
                  <el-input
                    v-model="addForm.locationLayer"
                    type="number"
                    placeholder="请输入"
                    :clearable="true"
                    max="10"
                  />
                </div>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="库位长/宽/高" class="formInfoTip mini">
              <el-row>
                <div class="mini-item">
                  <el-input
                    v-model="addForm.locationLength"
                    type="number"
                    placeholder="请输入"
                    :clearable="true"
                    max="10"
                  >
                    <template slot="append">cm</template></el-input>
                </div>
                <div class="mini-item">
                  <el-input
                    v-model="addForm.locationWidth"
                    type="number"
                    placeholder="请输入"
                    :clearable="true"
                    max="10"
                  >
                    <template slot="append">cm</template></el-input>
                </div>
                <div class="mini-item">
                  <el-input
                    v-model="addForm.locationHigh"
                    type="number"
                    placeholder="请输入"
                    :clearable="true"
                    max="10"
                  >
                    <template slot="append">cm</template></el-input>
                </div>
              </el-row>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-row>

    <el-row class="submit">
      <el-button
        @click="$router.push('/manage-base-info/location')"
      >返回</el-button>
      <el-button type="primary" @click="onSubmit">提交</el-button>
    </el-row>
  </el-row>
</template>

<script>
import { temperatureType, bearingType, useType } from '@/constant/area'
import { nextCodeFactory } from '@/api/codeFactory'
import { getAllWarehouseList } from '@/api/wareHouse'
import { getAllAreaList } from '@/api/area'
import { addLocation, setLocation, queryLocation } from '@/api/location'
export default {
  data() {
    return {
      temperatureType,
      bearingType,
      useType,
      addForm: {
        location: [],
        warehouseId: null,
        areaId: null,
        bearingType: null,
        code: null,
        name: null,
        status: 1,
        useType: null,
        temperatureType: null,
        maxWeight: null,
        maxNum: null,
        maxVolume: null,
        locationRow: null,
        locationColumn: null,
        locationLayer: null,
        locationLength: null,
        locationWidth: null,
        locationHigh: null
      },
      options: [],
      cateProps: {
        value: 'id',
        label: 'name',
        children: 'children',
        lazy: true,
        async  lazyLoad(node, resolve) {
          const { data } = await getAllAreaList({ warehouseId: node.value })
          data.forEach(i => { i.leaf = true })
          // 通过调用resolve将子节点数据返回，通知组件数据加载完成
          resolve(data)
        }
      },
      rules: {
        location: {
          required: true,
          message: '请选择库区',
          trigger: 'blur'
        },
        name: {
          required: true,
          max: 10,
          message: '请输入库位名称',
          trigger: 'blur'
        },
        bearingType: {
          required: true,
          message: '请选择承重类型',
          trigger: 'blur'
        },
        code: { required: true, message: '请输入库区编码', trigger: 'blur' },
        warehouseId: {
          required: true,
          message: '请输入所属仓库',
          trigger: 'blur'
        },
        temperatureType: {
          required: true,
          message: '请选择温度类型',
          trigger: 'blur'
        },
        useType: { required: true, message: '请选择用途类型', trigger: 'blur' },
        status: { required: true, message: '请输入仓库状态', trigger: 'blur' },
        maxNum: {
          required: true,
          message: '请输入承载上限',
          trigger: 'blur'
        },
        maxWeight: {
          required: true,
          message: '请输入承载体积',
          trigger: 'blur'
        },
        maxVolume: {
          required: true,
          message: '请输入承载重量',
          trigger: 'blur'
        }
      }
    }
  },
  async created() {
    const res = await getAllWarehouseList({ status: 1 })
    this.options = res.data
    this.options.forEach(i => { i.leaf = false })
    if (this.$route.params.id !== 'null') {
      const { data } = await queryLocation(this.$route.params.id)
      this.addForm = data
      // this.addForm.location = [data.warehouseId, data.areaId]
    } else {
      this.nextCodeFactory()
    }
  },
  methods: {
    async nextCodeFactory() {
      const { data } = await nextCodeFactory('KW')
      this.addForm.code = data
    },
    onSubmit() {
      this.$refs.addForm.validate(async(valid) => {
        if (valid) {
          [this.addForm.warehouseId, this.addForm.areaId] = this.addForm.location
          if (this.$route.params.id === 'null') {
            await addLocation(this.addForm)
            this.$message.success('新增成功')
          } else {
            await setLocation(this.addForm)
            this.$message.success('修改成功')
          }
          this.$router.push('/manage-base-info/location')
        } else {
          this.$message.warning('请完善表单')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.submit {
  border-top: 1px solid #f5efee;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  .el-button {
    width: 170px;
    margin: 20px;
  }
}
div.el-form-item.mini {
  width: 100%;
  margin: 0 0 40px;
  div.el-row {
    display: flex;
    .mini-item {
      width: 28.333%;
      margin-right: 5%;
    }
  }
}
</style>
